<template>
    <div class="demo">
        <!-- <van-nav-bar
                fixed
                title="数据列表"
                right-text="退出登录"
        /> -->
        <!-- <div class="list-content" id="list-content">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad"
                    :offset="10"
                >
                    <div class="list-item">
                        <van-cell v-for="item in list" :key="item" :title="item + ''" />
                    </div>

                </van-list>
            </van-pull-refresh>
        </div> -->
        <div class="uploader_box">
            <input type="file" id="logimg"  accept="image/*"   @change="ImgClick($event)" />
            <!-- <img class='camera-icon'   :src="img.camera" /> -->
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                list: [],
                loading: false,   //是否处于加载状态
                finished: false,  //是否已加载完所有数据
                isLoading: false,   //是否处于下拉刷新状态
            }
        },
        methods:{
            // onLoad() {
            //   console.log("onload函数")    //上拉加载
            //     setTimeout(() => {
            //         for (let i = 0; i < 15; i++) {
            //             this.list.push(this.list.length + 1);
            //         }
            //         this.loading = false;
            //         if (this.list.length >= 60) {
            //             this.finished = true;
            //         }
            //     }, 500);
            // },
            // onRefresh() {       //下拉刷新
            //     setTimeout(() => {
            //         this.finished = false;
            //         this.isLoading = false;
            //         this.list = []
            //         this.onLoad()
            //     }, 500);
            // },
            // ===========================
          //上传图片
		ImgClick(e) {
			var that = this;
			var fil = e.target.files[0];
		alert(e.target.value);
			console.log(fil);
			this.base(fil, function(base64Data, fileName) {
				that.qrCode = base64Data;
				that.imgFile = that.dataURLtoFile(base64Data, fileName);
                console.log('哈哈哈',that.imgFile);
                console.log(base64Data)
			});
        },
        //  // 图片转base64
        // base: function (file, backData) {
        //     /*
        //     * file:input上传图片
        //     * backData：处理完成回调函数
        //     * */
        //     // 通过构造函数初始化一个FileReader对象
        //     // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
        //     var reader = new FileReader();
        //     // 使用new Image()进行预加载
        //     var image = new Image();
        //     var _this = this;
        //     var canvas = this.createCanvas();
        //     var ctx = canvas.getContext("2d");
        //     reader.onload = function () {
        //     // 文件加载完处理
        //     var result = this.result;
        //     image.onload = function () {
        //         // 图片加载完处理
        //         var imgScale = _this.imgScaleW(350, this.width, this.height);
        //         canvas.width = imgScale.width;
        //         canvas.height = imgScale.height;
        //         ctx.drawImage(image, 0, 0, imgScale.width, imgScale.height);
        //         var dataURL = canvas.toDataURL("image/jpeg"); // 图片base64
        //         ctx.clearRect(0, 0, imgScale.width, imgScale.height); // 清除画布
        //         backData(dataURL, file.name); //dataURL:处理成功返回的图片base64
        //     };
        //     image.src = result;
        //     };
        //     reader.readAsDataURL(file);
        // },
        //  // 创建画布
        //     createCanvas: function () {
        //         // 创建画布
        //         var canvas = document.getElementById("canvas");
        //         if (!canvas) {
        //         var canvasTag = document.createElement("canvas");
        //         canvasTag.setAttribute("id", "canvas");
        //         canvasTag.setAttribute("style", "display:none;"); //隐藏画布
        //         document.body.appendChild(canvasTag);
        //         canvas = document.getElementById("canvas");
        //         }
        //         return canvas;
        //     },
        //      // 图片压缩
        //     imgScaleW: function (maxWidth, width, height) {
        //         /* maxWidth:宽度或者高度最大值
        //         * width：宽度
        //         * height：高度
        //         * */
        //         var imgScale = {};
        //         var w = 0;
        //         var h = 0;
        //         if (width <= maxWidth && height <= maxWidth) {
        //         // 如果图片宽高都小于限制的最大值,不用缩放
        //         imgScale = {
        //             width: width,
        //             height: height
        //         };
        //         } else {
        //         if (width >= height) {
        //             // 如果图片宽大于高
        //             w = maxWidth;
        //             h = Math.ceil((maxWidth * height) / width);
        //         } else {
        //             // 如果图片高大于宽
        //             h = maxWidth;
        //             w = Math.ceil((maxWidth * width) / height);
        //         }
        //         imgScale = {
        //             width: w,
        //             height: h
        //         };
        //         }
        //         return imgScale;
        //     },
        //      dataURLtoFile: function (dataurl, fileName) {
        //         var arr = dataurl.split(',');
        //         var mime = arr[0].match(/:(.*?);/)[1];
        //         var bstr = atob(arr[1]);
        //         var n = bstr.length;
        //         var u8arr = new Uint8Array(n);
        //         while (n--) {
        //         u8arr[n] = bstr.charCodeAt(n);
        //         }
        //         //转换成file对象
        //         return new File([u8arr], fileName, { type: mime });
        //         //转换成成blob对象
        //         //return new Blob([u8arr],{type:mime});
        //     },

        },
        mounted(){
            // let winHeight = document.documentElement.clientHeight                          //视口大小
            // document.getElementById('list-content').style.height = (winHeight - 46) +'px'  //调整上拉加载框高度
        }
    }
</script>

<style scoped>
    .list-content{
        margin-top:46px;
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }
    .demo{
        font-size: 0;
    }
    .uploader_box{
        font-size: 0.26rem;
    }
    /* .uploader_box{
        width:100%;
        height: auto;
        overflow: hidden;
        position: relative;
    }
    #logimg{
        position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity:0;
        }
    .camera-icon{
            width:100%;
            height:auto;
        } */
</style>
